import assert from 'power-assert';
import _ from 'lodash';

const visibleData = {
  data: {
    columnfield: '',
    container: {
      containerfield: ''
    },
    datagrid: [
      {
        datagridfield: ''
      }
    ],
    editgrid: [],
    fieldsetfield: '',
    panelfield: '',
    plainfield: '',
    tablefield: '',
    visible: true,
    wellfield: ''
  }
};

const hiddenData = {
  data: {
    visible: false
  },
  metadata: {}
};

const existingData = {
  data: {
    columnfield: 'one',
    container: {
      containerfield: 'two'
    },
    datagrid: [
      {
        datagridfield: 'three'
      }
    ],
    editgrid: [],
    fieldsetfield: 'four',
    panelfield: 'five',
    plainfield: 'six',
    tablefield: 'seven',
    visible: true,
    wellfield: 'eight'
  },
  metadata: {}
};

export default {
  title: 'Clear on hide Form Test',
  form: {
    'components': [{
      'conditional': {
        'eq': '',
        'when': null,
        'show': ''
      },
      'tags': [],
      'type': 'checkbox',
      'validate': {
        'required': false
      },
      'clearOnHide': true,
      'persistent': true,
      'protected': false,
      'defaultValue': false,
      'key': 'visible',
      'datagridLabel': true,
      'label': 'Visible',
      'hideLabel': false,
      'tableView': true,
      'inputType': 'checkbox',
      'input': true,
      'lockKey': true,
      'hidden': false,
      'name': '',
      'value': ''
    }, {
      'input': true,
      'tableView': true,
      'inputType': 'text',
      'inputMask': '',
      'label': 'Plain Field',
      'key': 'plainfield',
      'placeholder': '',
      'prefix': '',
      'suffix': '',
      'multiple': false,
      'defaultValue': '',
      'protected': false,
      'unique': false,
      'persistent': true,
      'hidden': false,
      'clearOnHide': true,
      'validate': {
        'required': false,
        'minLength': '',
        'maxLength': '',
        'pattern': '',
        'custom': '',
        'customPrivate': false
      },
      'conditional': {
        'show': 'true',
        'when': 'visible',
        'eq': 'true'
      },
      'type': 'textfield',
      'hideLabel': false,
      'labelPosition': 'top',
      'tags': [],
      'properties': {},
      'lockKey': true
    }, {
      'input': true,
      'tree': true,
      'components': [{
        'input': true,
        'tableView': true,
        'inputType': 'text',
        'inputMask': '',
        'label': 'Container Field',
        'key': 'containerfield',
        'placeholder': '',
        'prefix': '',
        'suffix': '',
        'multiple': false,
        'defaultValue': '',
        'protected': false,
        'unique': false,
        'persistent': true,
        'hidden': false,
        'clearOnHide': true,
        'validate': {
          'required': false,
          'minLength': '',
          'maxLength': '',
          'pattern': '',
          'custom': '',
          'customPrivate': false
        },
        'conditional': {
          'show': '',
          'when': null,
          'eq': ''
        },
        'type': 'textfield',
        'hideLabel': false,
        'labelPosition': 'top',
        'tags': [],
        'properties': {},
        'lockKey': true
      }],
      'tableView': true,
      'label': 'Container',
      'key': 'container',
      'protected': false,
      'persistent': true,
      'clearOnHide': true,
      'type': 'container',
      'labelPosition': 'top',
      'tags': [],
      'conditional': {
        'show': 'true',
        'when': 'visible',
        'eq': 'true'
      },
      'properties': {},
      'hideLabel': false
    }, {
      'conditional': {
        'eq': 'true',
        'when': 'visible',
        'show': 'true'
      },
      'tags': [],
      'type': 'datagrid',
      'clearOnHide': true,
      'persistent': true,
      'protected': false,
      'key': 'datagrid',
      'label': 'Datagrid',
      'tableView': true,
      'components': [{
        'hideLabel': true,
        'tags': [],
        'type': 'textfield',
        'conditional': {
          'eq': '',
          'when': null,
          'show': ''
        },
        'validate': {
          'customPrivate': false,
          'custom': '',
          'pattern': '',
          'maxLength': '',
          'minLength': '',
          'required': false
        },
        'clearOnHide': true,
        'persistent': true,
        'unique': false,
        'protected': false,
        'defaultValue': '',
        'multiple': false,
        'suffix': '',
        'prefix': '',
        'placeholder': '',
        'key': 'datagridfield',
        'label': 'Datagrid  Field',
        'inputMask': '',
        'inputType': 'text',
        'tableView': true,
        'input': true,
        'hidden': false,
        'labelPosition': 'top',
        'properties': {},
        'lockKey': true
      }],
      'tree': true,
      'input': true,
      'hidden': false,
      'hideLabel': false,
      'addAnotherPosition': 'bottom',
      'properties': {},
      'lockKey': true
    }, {
      'input': true,
      'tree': true,
      'components': [{
        'input': true,
        'tableView': true,
        'inputType': 'text',
        'inputMask': '',
        'label': 'Edit Grid Field',
        'key': 'editgridfield',
        'placeholder': '',
        'prefix': '',
        'suffix': '',
        'multiple': false,
        'defaultValue': '',
        'protected': false,
        'unique': false,
        'persistent': true,
        'hidden': false,
        'clearOnHide': true,
        'validate': {
          'required': false,
          'minLength': '',
          'maxLength': '',
          'pattern': '',
          'custom': '',
          'customPrivate': false
        },
        'conditional': {
          'show': '',
          'when': null,
          'eq': ''
        },
        'type': 'textfield',
        'hideLabel': false,
        'labelPosition': 'top',
        'tags': [],
        'properties': {},
        'lockKey': true
      }],
      'multiple': false,
      'tableView': true,
      'label': 'Edit Grid',
      'key': 'editgrid',
      'protected': false,
      'persistent': true,
      'hidden': false,
      'clearOnHide': true,
      'templates': {
        'header': '<div class="row"> \n  {%util.eachComponent(components, function(component) { %} \n    <div class="col-sm-2"> \n      {{ component.label }} \n    </div> \n  {% }) %} \n</div>',
        'row': '<div class="row"> \n  {%util.eachComponent(components, function(component) { %} \n    <div class="col-sm-2"> \n      {{ row[component.key] }} \n    </div> \n  {% }) %} \n  <div class="col-sm-2"> \n    <div class="btn-group pull-right"> \n      <div class="btn btn-default editRow">Edit</div> \n      <div class="btn btn-danger removeRow">Delete</div> \n    </div> \n  </div> \n</div>',
        'footer': ''
      },
      'type': 'editgrid',
      'tags': [],
      'conditional': {
        'show': 'true',
        'when': 'visible',
        'eq': 'true'
      },
      'properties': {},
      'lockKey': true,
      'hideLabel': false
    }, {
      'key': 'panel',
      'input': false,
      'title': 'Panel',
      'theme': 'default',
      'components': [{
        'input': true,
        'tableView': true,
        'inputType': 'text',
        'inputMask': '',
        'label': 'Panel Field',
        'key': 'panelfield',
        'placeholder': '',
        'prefix': '',
        'suffix': '',
        'multiple': false,
        'defaultValue': '',
        'protected': false,
        'unique': false,
        'persistent': true,
        'clearOnHide': true,
        'validate': {
          'required': false,
          'minLength': '',
          'maxLength': '',
          'pattern': '',
          'custom': '',
          'customPrivate': false
        },
        'conditional': {
          'show': '',
          'when': null,
          'eq': ''
        },
        'type': 'textfield',
        'tags': [],
        'hidden': false,
        'hideLabel': false,
        'labelPosition': 'top',
        'properties': {},
        'lockKey': true
      }],
      'type': 'panel',
      'tags': [],
      'conditional': {
        'show': 'true',
        'when': 'visible',
        'eq': 'true'
      },
      'clearOnHide': false,
      'tableView': false,
      'hideLabel': false,
      'breadcrumb': 'default',
      'properties': {},
      'lockKey': true
    }, {
      'input': false,
      'key': 'columns',
      'columns': [{
        'components': [{
          'input': true,
          'tableView': true,
          'inputType': 'text',
          'inputMask': '',
          'label': 'Column Field',
          'key': 'columnfield',
          'placeholder': '',
          'prefix': '',
          'suffix': '',
          'multiple': false,
          'defaultValue': '',
          'protected': false,
          'unique': false,
          'persistent': true,
          'clearOnHide': true,
          'validate': {
            'required': false,
            'minLength': '',
            'maxLength': '',
            'pattern': '',
            'custom': '',
            'customPrivate': false
          },
          'conditional': {
            'show': '',
            'when': null,
            'eq': ''
          },
          'type': 'textfield',
          'tags': [],
          'hidden': false,
          'hideLabel': false,
          'labelPosition': 'top',
          'properties': {},
          'lockKey': true
        }],
        'width': 6,
        'offset': 0,
        'push': 0,
        'pull': 0
      }, {
        'components': [],
        'width': 6,
        'offset': 0,
        'push': 0,
        'pull': 0
      }],
      'type': 'columns',
      'tags': [],
      'conditional': {
        'show': 'true',
        'when': 'visible',
        'eq': 'true'
      },
      'customClass': 'Columns',
      'clearOnHide': false,
      'tableView': false,
      'hideLabel': false,
      'properties': {},
      'lockKey': true
    }, {
      'input': false,
      'key': 'table',
      'numRows': 3,
      'numCols': 3,
      'rows': [
        [{
          'components': [{
            'input': true,
            'tableView': true,
            'inputType': 'text',
            'inputMask': '',
            'label': 'Table Field',
            'key': 'tablefield',
            'placeholder': '',
            'prefix': '',
            'suffix': '',
            'multiple': false,
            'defaultValue': '',
            'protected': false,
            'unique': false,
            'persistent': true,
            'clearOnHide': true,
            'validate': {
              'required': false,
              'minLength': '',
              'maxLength': '',
              'pattern': '',
              'custom': '',
              'customPrivate': false
            },
            'conditional': {
              'show': '',
              'when': null,
              'eq': ''
            },
            'type': 'textfield',
            'tags': [],
            'hidden': false,
            'hideLabel': false,
            'labelPosition': 'top',
            'properties': {},
            'lockKey': true
          }]
        }, {
          'components': []
        }, {
          'components': []
        }],
        [{
          'components': []
        }, {
          'components': []
        }, {
          'components': []
        }],
        [{
          'components': []
        }, {
          'components': []
        }, {
          'components': []
        }]
      ],
      'header': [],
      'caption': '',
      'striped': false,
      'bordered': false,
      'hover': false,
      'condensed': false,
      'type': 'table',
      'tags': [],
      'conditional': {
        'show': 'true',
        'when': 'visible',
        'eq': 'true'
      },
      'clearOnHide': false,
      'tableView': false,
      'hideLabel': false,
      'properties': {},
      'lockKey': true
    }, {
      'clearOnHide': false,
      'key': 'well',
      'input': false,
      'components': [{
        'input': true,
        'tableView': true,
        'inputType': 'text',
        'inputMask': '',
        'label': 'Well Field',
        'key': 'wellfield',
        'placeholder': '',
        'prefix': '',
        'suffix': '',
        'multiple': false,
        'defaultValue': '',
        'protected': false,
        'unique': false,
        'persistent': true,
        'hidden': false,
        'clearOnHide': true,
        'validate': {
          'required': false,
          'minLength': '',
          'maxLength': '',
          'pattern': '',
          'custom': '',
          'customPrivate': false
        },
        'conditional': {
          'show': '',
          'when': null,
          'eq': ''
        },
        'type': 'textfield',
        'hideLabel': false,
        'labelPosition': 'top',
        'tags': [],
        'properties': {},
        'lockKey': true
      }],
      'tableView': false,
      'type': 'well',
      'hideLabel': false,
      'tags': [],
      'conditional': {
        'show': 'true',
        'when': 'visible',
        'eq': 'true'
      },
      'properties': {}
    }, {
      'clearOnHide': false,
      'key': 'fieldset',
      'input': false,
      'tableView': false,
      'legend': 'Fieldset',
      'components': [{
        'input': true,
        'tableView': true,
        'inputType': 'text',
        'inputMask': '',
        'label': 'Fieldset Field',
        'key': 'fieldsetfield',
        'placeholder': '',
        'prefix': '',
        'suffix': '',
        'multiple': false,
        'defaultValue': '',
        'protected': false,
        'unique': false,
        'persistent': true,
        'hidden': false,
        'clearOnHide': true,
        'validate': {
          'required': false,
          'minLength': '',
          'maxLength': '',
          'pattern': '',
          'custom': '',
          'customPrivate': false
        },
        'conditional': {
          'show': '',
          'when': null,
          'eq': ''
        },
        'type': 'textfield',
        'hideLabel': false,
        'labelPosition': 'top',
        'tags': [],
        'properties': {},
        'lockKey': true
      }],
      'type': 'fieldset',
      'hideLabel': false,
      'tags': [],
      'conditional': {
        'show': 'true',
        'when': 'visible',
        'eq': 'true'
      },
      'properties': {}
    }]
  },
  tests: {
    'Test starting hidden'(form, done) {
      assert.deepEqual(form.getValue(), hiddenData);
      done();
    },
    'Test starting visible'(form, done) {
      form.pristine = false;
      form.submission = {
        data: {
          visible: true
        }
      };
      // Need to wait for the changes to propogate.
      setTimeout(() => {
        assert.deepEqual(form.getValue(), visibleData);
        done();
      }, 300);
    },
    'Test with data'(form, done) {
      form.submission = _.cloneDeep(existingData);
      // Go next tick to get the changes applied.
      setTimeout(() => {
        assert.deepEqual(form.getValue(), existingData);
        done();
      });
    },
    'Test changing visible from hidden to visible'(form, done) {
      form.pristine = false;
      form.submission = {
        data: {
          visible: true
        }
      };

      setTimeout(() => {
        form.getComponent('visible', component => {
          form.on('change', change => {
            assert.deepEqual(change.data, hiddenData.data);
            done();
          });
          component.setValue(false);
        });
      });
    },
    'Test changing visible from visible to hidden'(form, done) {
      form.pristine = false;
      form.submission = {
        data: {
          visible: false
        }
      };
      setTimeout(() => {
        form.getComponent('visible', component => {
          form.on('change', change => {
            assert.deepEqual(change.data, visibleData.data);
            done();
          });
          component.setValue(true);
        });
      });
    },
    // 'Test resetting data when hidden'(form, done) {
    //   form.pristine = false;
    //   form.submission = _.cloneDeep(existingData);
    //   setTimeout(() => {
    //     assert.deepEqual(form.getValue(), existingData);
    //     form.getComponent('visible', component => {
    //       let count = 0;
    //       form.on('change', change => {
    //         switch (count) {
    //           case 0:
    //             assert.deepEqual(change.data, hiddenData.data);
    //             break;
    //           case 1:
    //             assert.deepEqual(change.data, visibleData.data);
    //             done();
    //             break;
    //         }
    //         count++;
    //       });
    //       component.setValue(false);
    //       component.setValue(true);
    //     });
    //   });
    // }
  }
};

